<style rel="stylesheet/less" lang="less" scoped>
.fixed-btn {
    z-index: 1001;
    position: fixed;
    top: 30%;
    right: 0;
    margin-right: 20px;
    .bottom-qrcode {
        position: absolute;
        left: -150px;
        top: -20px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 1px 1px 1px 2px #ddd;
        img {
            width: 100px;
            height: 100px;
        }
    }
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;

        li {
            width: 80px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }

            a,
            a:hover,
            a:active,
            a:focus {
                display: block;
                width: 100%;
                text-align: center;
                color: #fff;

                i {
                    font-size: 20px;
                    color: #fff;
                }
                h5 {
                    font-size: 14px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    color: #fff;
                }
            }

            &.button1 {
                background: linear-gradient(#ffb35b, #ff8d5b);
                padding: 10px 0;
            }

            &.button2 {
                background-color: #51db89;
                padding-top: 5px;
                &:hover{
                    background-color: #4bca7e;
                }
            }

            &.button3 {
                background-color: #49d481;
                padding-top: 5px;
                &:hover{
                    background-color: #43c377;
                }
            }

            &.button4 {
                background-color: #3ecc77;
                padding-top: 5px;
                &:hover{
                    background-color: #39bc6e;
                }
            }
            &.button5 {
                background-color: #30c06b;
            }
        }
        /*         li {
    a,
    a:hover,
    a:active,
    a:focus {
        width: 40px;
        height: 40px;
        background-color: #37CA73;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-bottom: 5px;
        font-size: 18px;
        text-decoration: none;
        border-radius: 4px;
    }
} */
    }
}
</style>

<template>
    <div class="fixed-btn hidden-xs">
        <div id="bottom-qrcode" class="bottom-qrcode" v-show="isShowQrCode">
            <b>{{ wechat }}</b>
            <br>
            <img :alt="imgAlt" :src="imgSrc">
        </div>

        <ul>
            <li>
                <img :src="menuTopUrl" alt="" style="margin-bottom: -1px;">
            </li>
            <li class="button1">
              <a href="/reserves/new">
                  <i class="icon-home-Side-yuyue"></i>
                  <h5>一键预约</h5>
              </a>
            </li>
            <li class="button2">
                <a href="#" @click="goToService">
                    <i class="icon-home-Side-zaixianzixun"></i>
                    <h5>在线咨询</h5>
                </a>
            </li>
            <li class="button3">
                <a href="/service.html">
                    <i class="icon-home-Side-weixiu"></i>
                    <h5>售后服务</h5>
                </a>
            </li>
            <li class="button4">
                <a href="/join.html">
                    <i class="icon-home-Side-jiameng"></i>
                    <h5>诚邀合作</h5>
                </a>
            </li>
            <!--
            <li class="button3">
                <a class="qrcode" href="#" @click="toggleQrCode">
                  <i class="fa fa-qrcode"></i>
                  <h5>二维码</h5>
                </a>
            </li>
            -->
            <li class="button5">
                <a class="go-top hide-go-top" href="#" @click="goToTop">
                    <i class="fa fa-angle-up"></i>
                    <h5>返回顶部</h5>
                </a>
            </li>
            <li>
                <img :src="menuBottomUrl" alt="">
            </li>
            <!--         <a class="go-top hide-go-top" href="#" @click="goToTop" v-show="isShowGoToTop">-->
        </ul>
    </div>
</template>

<script>
import fixMenuTop from '../../../assets/images/home/fix-menu-top.png'
import fixMenuButtom from '../../../assets/images/home/fix-menu-bottom.png'

export default {
    data() {
        return {
            wechat: "关注阳毅公众号",
            isShowGoToTop: true,
            isShowQrCode: false,
            imgAlt: "关注阳毅",
            imgSrc: "http://oqhwiuu27.bkt.clouddn.com/WechatIMG93.jpeg",
            menuTopUrl: fixMenuTop,
            menuBottomUrl: fixMenuButtom
        }
    },
    methods: {
        goToTop(e) {
            e.preventDefault()
            $("html,body").animate({
                scrollTop: 0
            }, 600)

            return false
        },
        toggleQrCode(e) {
            e.preventDefault()
            e.stopPropagation()
            this.isShowQrCode = !this.isShowQrCode
        },
        goToService(e) {
            Detector.floatclick()
            return false;
        }
    },
    mounted() {
        let scrollTrigger = 100
        let self = this
        let backToTop = function () {
            let scrollTop = $(window).scrollTop()
            if (scrollTop < scrollTrigger) {
                self.isShowGoToTop = false
            } else {
                self.isShowGoToTop = true
            }
        }
        backToTop()
        $(window).on("scroll", function () {
            backToTop()
        })
    }
}

</script>
